<!--

 * @Description: 如果表达式
-->
<template>
  <div class="nodeIf">
    <Form
      :model="G_formItem"
      :label-width="80"
      label-colon
      :disabled="G_disabled"
      class="form"
    >
      <Row>
        <FormItem label="节点ID" class="formItem">
          <span>{{ G_formItem.nodeID }}</span>
        </FormItem>
        <FormItem label="节点类型" class="formItem"
          ><span>{{ G_formItem.nodeName }}</span>
        </FormItem>
      </Row>
      <FormItem label="功能说明" class="formItem">
        <Input
          v-model="G_formItem.explain"
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 5 }"
          placeholder="无内容"
          @on-change="onChange($event, 'explain')"
        />
      </FormItem>
      <FormItem label="条件表达式" class="formItem">
        <span :class="G_disabled ? 'disabled' : 'ifExpr'">
          <!-- <Input
            v-model="G_formItem.expr"
            readonly
            placeholder="无内容"
            icon="md-settings"
            @on-click="exprClick"
            @on-change="onChange($event, 'expr')"
          /> -->
          <i title="高级编辑"
            ><Button
              icon="md-settings"
              type="text"
              :disabled="G_disabled"
              size="small"
              @click="exprClick"
            ></Button
          ></i>
          <code-input
            ref="codeInput"
            v-model="G_formItem.expr"
            :readonly="G_disabled"
            @on-changes="onChange($event, 'expr')"
          ></code-input>
        </span>
      </FormItem>
    </Form>
  </div>
</template>
<script lang="ts">
import { I_if, I_ruleEditor, T_srv, Tsrv, ts, ifs, vue } from '../config';
import codeInput from '../../codeInput/index.vue';

@T_srv.comp({ components: { codeInput } })
export default class nodeIf extends vue {
  @T_srv.ref(`codeInput`) refCodeIput: any;

  @T_srv.prop({ type: Object }) readonly params!: any;

  // 父组件compBoxInfo
  @T_srv.prop({
    required: false,
    type: Object,
    default: null
  })
  compBoxInfo: ifs.I_compBoxInfo;

  private GT_compBox: ifs.I_compBox;

  private G_compID: string;

  private G_disabled: boolean = false;

  private GT_compBoxInfo: ifs.I_compBoxInfo;

  private G_formItem: I_if = {
    type: 'ifNode',
    nodeID: '',
    nodeName: '如果',
    explain: '',
    expr: ''
  };

  created() {
    this.G_compID = this.compBoxInfo.compID;
    this.GT_compBox = this.compBoxInfo.TcompBox;
    this.GT_compBoxInfo = { compID: this.G_compID, TcompBox: this.GT_compBox };
    this.G_disabled = this.params.disabled;
    // 接收prop 参数
    if (this.params.data && this.params.data[`nodeID`]) {
      this.G_formItem.nodeID = this.params.data[`nodeID`];
    }
    if (this.params.data && this.params.data[`expr`]) {
      this.G_formItem.expr = this.params.data[`expr`];
    }
    if (this.params.data && this.params.data[`explain`]) {
      this.G_formItem.explain = this.params.data[`explain`];
    }
  }

  mounted() {
    this.GT_compBox.addCompMergeName(this.G_compID, 'nodeAttr_if', this);
  }

  destroyed() {
    this.GT_compBox.removeCompMergeName(this.G_compID, 'nodeAttr_if');
  }
  /**
   * @Author: wiz
   * @param {*}
   * @return {*}
   * @description: 表达式点击
   */

  exprClick() {
    if (this.G_disabled) {
      return;
    }

    this.GT_compBox.getCompMergeName(this.G_compID, `ruleEditor`).addModel(
      `resources`,
      {
        compBoxInfo: this.compBoxInfo,
        fromCompName: 'nodeAttr_if',
        value: this.G_formItem.expr
      }
    );
  }
  /**
   * @Author: wiz
   * @param {*} P_v
   * @return {*}
   * @description: 设置资源窗口传来的数据
   */

  setValue(P_v: string) {
    this.G_formItem.expr = P_v;
    this.onChange();
  }
  /**
   * @Author: wiz
   * @param {*} P_s
   * @return {*}
   * @description: 设置可用状态
   */

  setDisabled(P_s: boolean) {
    this.G_disabled = P_s;
  }

  /**
   * @Author: wiz
   * @param {*} P_e
   * @param {*} P_s
   * @return {*}
   * @description: form 数据改变
   */
  onChange(P_e?, P_s?: string) {
    const L_editor: I_ruleEditor = this.GT_compBox.getCompMergeName(
      this.G_compID,
      `ruleEditor`
    ).G_editor;
    L_editor.setNodeAttrData(this.G_formItem);
  }
}
</script>
<style scoped lang="scss">
.nodeIf {
  height: 100%;
  width: 100%;

  padding-top: 5px;
  padding-bottom: 5px;
  border-top: 1px solid #a1a1b3;
  border-bottom: 1px solid #a1a1b3;
}
.formItem {
  margin-bottom: 5px;
}
.form {
  padding-top: 5px;
}
.ifExpr ::v-deep .ivu-icon {
  cursor: pointer;
  color: #2d8eff;
}
.disabled ::v-deep .ivu-icon {
  cursor: no-drop;
}
</style>
